<script setup lang="ts">
import GuidClose from "@/assets/svg/devices/guid_close.svg";
import { computed, ref } from "vue";
import DeviceAddGuidFirst from "@/views/device/components/guid/first.vue";
import DeviceAddGuidSecond from "@/views/device/components/guid/second.vue";
import DeviceAddGuidConfirm from "@/views/device/components/guid/confirmAdd.vue";

const visible = ref(false);

defineOptions({
  name: "DeviceAddGuide"
});

// 当前步骤
const currentStep = ref(0);
const stepComponents = [DeviceAddGuidFirst, DeviceAddGuidSecond, DeviceAddGuidConfirm];
// 当前步骤组件
const currentStepComponent = computed(() => stepComponents[currentStep.value]);
// 步骤列表
const steps = ["第一步", "第二步", "第三步"];

// 切换到下一步
const nextStep = () => {
  if (currentStep.value < stepComponents.length - 1) {
    currentStep.value++;
  }
};

// 切换到上一步
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 完成引导页
const finish = () => {
  visible.value = false;
};
</script>

<template>
  <el-dialog v-model="visible" :show-close="false" style="width: 667px; height: 453px; flex-shrink: 0; border-radius: 11px; border: 1px solid #d3d3d3; background: #fff">
    <template #header="{ close }">
      <el-row style="margin-top: 24px">
        <el-col :span="22"
          ><span class="flex justify-center" style="color: #2d3748; font-size: 19px; font-style: normal; font-weight: 700; line-height: 28px">{{ steps[currentStep] }}</span></el-col
        >
        <el-col :span="2">
          <el-button text class="flex justify-end" @click="close">
            <GuidClose />
          </el-button>
        </el-col>
      </el-row>
    </template>
    <component :is="currentStepComponent" @next="nextStep" @prev="prevStep" @finish="finish" />
  </el-dialog>
</template>

<style scoped lang="scss"></style>
